<template>
  <yin-login-logo></yin-login-logo>
  <div class="sign">
    <div class="sign-head">
      <span>欢迎登录</span>
    </div>
    <el-tabs v-model="activeName" type="border-card" tab-position="top">
      <el-tab-pane label="验证码登录" name="first">
        <el-form
          ref="signInFormByPhoneCode"
          status-icon
          :model="phoneCodeForm"
          :rules="SignInByCodeRules"
        >
          <el-form-item prop="phoneNum">
            <el-input
              placeholder="手机号码"
              v-model="phoneCodeForm.phoneNum"
            ></el-input>
          </el-form-item>
          <el-form-item prop="checkCode">
            <el-col :span="11" :offset="0">
              <el-input
                type="text"
                placeholder="请输入验证码"
                v-model="phoneCodeForm.checkCode"
              ></el-input>
            </el-col>
            <el-col :span="2" :offset="0"></el-col>
            <el-col :span="11">
              <el-button
                style="width: 100%"
                type="primary"
                @click="handleSendCode"
                :disabled="issend"
              >
                {{ countdown > 0 ? countdown + "秒后重新发送" : "发送验证码" }}
              </el-button>
            </el-col>
          </el-form-item>
          <el-form-item class="sign-code-btn">
            <el-button type="primary" @click="handleLoginInByCode"
              >登录/注册</el-button
            >
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="账号密码登录" name="second">
        <el-form
          ref="signInForm"
          status-icon
          :model="registerForm"
          :rules="SignInRules"
        >
          <el-form-item prop="username">
            <el-input
              placeholder="用户名"
              v-model="registerForm.username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              placeholder="密码"
              v-model="registerForm.password"
              @keyup.enter="handleLoginIn"
            ></el-input>
          </el-form-item>
          <el-form-item class="sign-btn">
            <el-button @click="handleSignUp">注册</el-button>
            <el-button type="primary" @click="handleLoginIn">登录</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <el-row :gutter="20" class="otherway">
      <el-col :span="8" :offset="0"
        ><el-button type="primary" size="default" class="btn"
          >其它方式：</el-button
        ></el-col
      >

      <el-col :span="5" :offset="0">
        <el-button type="primary" size="default" class="btn">
          <svg
            width="24"
            height="24"
            fill="none"
            viewBox="0 0 24 24"
            class="ZDI ZDI--Wechat24"
          >
            <path
              fill="#07C160"
              d="M20.314 18.59c1.333-.968 2.186-2.397 2.186-3.986 0-2.91-2.833-5.27-6.325-5.27-3.494 0-6.325 2.36-6.325 5.27 0 2.911 2.831 5.271 6.325 5.271.698.001 1.393-.096 2.064-.288l.186-.029c.122 0 .232.038.336.097l1.386.8.12.04a.21.21 0 0 0 .212-.211l-.034-.154-.285-1.063-.023-.135a.42.42 0 0 1 .177-.343ZM9.09 3.513C4.9 3.514 1.5 6.346 1.5 9.84c0 1.905 1.022 3.622 2.622 4.781a.505.505 0 0 1 .213.412l-.026.16-.343 1.276-.04.185c0 .14.113.254.252.254l.146-.047 1.663-.96a.793.793 0 0 1 .403-.116l.222.032c.806.231 1.64.348 2.478.348l.417-.01a4.888 4.888 0 0 1-.255-1.55c0-3.186 3.1-5.77 6.923-5.77l.411.011c-.57-3.02-3.71-5.332-7.494-5.332Zm4.976 10.248a.843.843 0 1 1 0-1.685.843.843 0 0 1 0 1.684v.001Zm4.217 0a.843.843 0 1 1 0-1.685.843.843 0 0 1 0 1.684v.001ZM6.561 8.827a1.012 1.012 0 1 1 0-2.023 1.012 1.012 0 0 1 0 2.023Zm5.061 0a1.012 1.012 0 1 1 0-2.023 1.012 1.012 0 0 1 0 2.023Z"
              clip-rule="evenodd"
            ></path>
          </svg>
        </el-button>
      </el-col>
      <el-col :span="5" :offset="0">
        <el-button type="primary" size="default" class="btn">
          <img :src="aliLogo" fit="fill" :lazy="true" width="24" height="24" />
        </el-button>
      </el-col>
      <el-col :span="5" :offset="0">
        <el-button type="primary" size="default" class="btn">
          <svg
            t="1687607198083"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1614"
            width="24"
            height="24"
          >
            <path
              d="M867.1232 25.6h-91.1872a29.184 29.184 0 0 0-21.504 9.5232 33.28 33.28 0 0 0-8.9088 22.9376c0 8.2944 2.9696 16.5376 8.9088 22.8864a29.184 29.184 0 0 0 21.504 9.5232h91.1872v97.28a33.28 33.28 0 0 0 8.9088 22.9376 29.184 29.184 0 0 0 43.008 0 33.28 33.28 0 0 0 8.8576-22.9376v-97.28c0-35.84-27.2384-64.8704-60.7744-64.8704z m30.3616 486.4a30.1568 30.1568 0 0 0-30.3616 30.3616v91.1872h-91.1872a30.1568 30.1568 0 0 0-21.504 8.96c-1.6384 1.5872-2.5088 3.6864-3.6864 5.632-34.304-33.024-72.8576-60.16-115.5072-78.1824 86.6304-51.7632 141.4656-151.296 124.6208-263.168-15.872-104.96-97.28-192.6656-201.1648-214.3744a273.408 273.408 0 0 0-56.32-5.888 260.4544 260.4544 0 0 0-260.5568 260.5568c0 95.0784 51.5584 177.5104 127.6416 222.976-42.5472 18.0224-81.2032 45.1584-115.5072 78.1824-1.1264-1.9456-2.048-4.0448-3.6864-5.632a30.1568 30.1568 0 0 0-21.504-8.9088h-91.136v-91.2384a30.1568 30.1568 0 0 0-8.96-21.504 30.1568 30.1568 0 0 0-21.504-8.9088 30.1568 30.1568 0 0 0-30.3616 30.464v91.136c0 33.536 27.2896 60.8256 60.8256 60.8256H212.48a488.1408 488.1408 0 0 0-97.1264 240.2304 57.344 57.344 0 0 0 56.9856 63.744h660.0192a57.344 57.344 0 0 0 56.9856-63.744 487.7312 487.7312 0 0 0-97.1264-240.3328h74.8544c33.5872 0 60.8256-27.2896 60.8256-60.8256v-91.2384A30.1568 30.1568 0 0 0 897.536 512V512zM107.264 220.16a29.184 29.184 0 0 0 21.504-9.472 33.28 33.28 0 0 0 8.8576-22.9376v-97.28H228.864a29.184 29.184 0 0 0 21.504-9.5232 33.28 33.28 0 0 0 8.8576-22.8864 33.28 33.28 0 0 0-8.9088-22.9376 29.184 29.184 0 0 0-21.504-9.5232H137.6256C103.9872 25.6 76.8 54.6304 76.8 90.4704v97.28c0 8.3456 2.9184 16.4864 8.9088 22.9376a29.184 29.184 0 0 0 21.504 9.472h0.0512z"
              fill="#F9A14D"
              p-id="1615"
            ></path>
            <path
              d="M51.2 281.6h921.6V358.4H51.2z"
              fill="#F9A14D"
              p-id="1616"
            ></path>
          </svg>
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, getCurrentInstance, ref } from "vue";
import mixin from "@/mixins/mixin";
import YinLoginLogo from "@/components/layouts/YinLoginLogo.vue";
import { HttpManager } from "@/api";
import { useUserStore, useConfigureStore } from "@/store";
import { NavName, RouterName, SignInRules, SignInByCodeRules } from "@/enums";
export default defineComponent({
  components: {
    YinLoginLogo,
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const { routerManager, changeIndex } = mixin();
    const store = useUserStore();
    const configStore = useConfigureStore();
    const activeName = ref("first");
    const countdown = ref(0);
    const timer = ref(null);
    const issend = ref(false);

    const aliLogo = new URL("../assets/images/aliLogo.png", import.meta.url)
      .href;
    // 登录用户名密码
    const registerForm = reactive({
      username: "",
      password: "",
    });
    // 登录短信验证码
    const phoneCodeForm = reactive({
      phoneNum: "",
      checkCode: "",
    });

    async function handleLoginIn() {
      let canRun = true;
      // 表单数据验证
      (proxy.$refs["signInForm"] as any).validate((valid) => {
        if (!valid) return (canRun = false);
      });
      if (!canRun) return;

      try {
        const username = registerForm.username;
        const password = registerForm.password;
        const result = (await HttpManager.signIn({
          username: username,
          password: password,
        })) as ResponseBody;
        (proxy as any).$message({
          message: result.message,
          type: result.type,
        });
        console.log(result);
        if (result.success) {
          console.log(result);
          // 更新store用户信息
          store.setUserId(result.data.obj.id); //用户id
          // sessionStorage.setItem('userId', result.data.obj.id);
          store.setUsername(result.data.obj.username); // 用户名
          store.setUserPic(result.data.obj.avator); // 用户头像
          //从请求头中获取token
          // localStorage.setItem("token", result.data.authorization);
          configStore.setToken(true); // 是否有Token

          // 设置导航的样式
          changeIndex(NavName.Home);
          // 跳转到Home页面
          routerManager(RouterName.Home, { path: RouterName.Home });
        }
      } catch (error) {
        console.error(error);
      }
    }

    function handleSignUp() {
      debugger;
      routerManager(RouterName.SignUp, { path: RouterName.SignUp });
    }

    async function handleSendCode() {
      if (phoneCodeForm.phoneNum == "") return false;
      //倒计时
      issend.value = true;
      countdown.value = 59;
      timer.value = setInterval(() => {
        if (countdown.value > 0) {
          countdown.value--;
        } else {
          clearInterval(timer.value);
          timer.value = null;
          issend.value = false;
        }
      }, 1000);
      try {
        const phoneNum = phoneCodeForm.phoneNum;
        // const result = (await HttpManager.sendPhoneCode(phoneNum)) as ResponseBody;
        const result = null;
        (proxy as any).$message({
          message: result.message,
          type: result.type,
        });
      } catch (error) {
        console.error(error);
      }
    }

    async function handleLoginInByCode() {
      let canRun = true;
      (proxy.$refs["signInFormByPhoneCode"] as any).validate((valid) => {
        if (!valid) return (canRun = false);
      });
      if (!canRun) return;
      try {
        const phoneNum = phoneCodeForm.phoneNum;
        const checkCode = phoneCodeForm.checkCode;
        const result = null;
        // const result = (await HttpManager.signInByPhoneCode({ phoneNum, checkCode })) as ResponseBody;
        (proxy as any).$message({
          message: result.message,
          type: result.type,
        });
        console.log(result);
        if (result.success) {
          console.log("登录成功");

          proxy.$store.commit("setToken", true);
          changeIndex(NavName.Home);
          routerManager(RouterName.Home, { path: RouterName.Home });
        }
      } catch (error) {
        console.error(error);
      }
    }

    return {
      registerForm,
      SignInRules,
      SignInByCodeRules,
      activeName,
      phoneCodeForm,
      countdown,
      issend,
      aliLogo,
      handleLoginIn,
      handleSignUp,
      handleSendCode,
      handleLoginInByCode,
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/css/sign.scss";
</style>
